import { FC, ReactNode } from 'react';
import { ArrowDownOutlined, ArrowUpOutlined, MinusOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import Attribute from './attribute';
import SingleQuotation from './single-quotation';
import { downColor, flatColor, labelColor, upColor } from '../constants/color';
import { formatChineseAmount, getStyleColor } from '../utils';
import { TenTrack, UpDownType } from '@/utils/analyze';

export interface MarketChartProps {
  data: TenTrack;
}

const UpDownTypeIcon: Record<UpDownType, ReactNode> = {
  [UpDownType.Up]: <ArrowUpOutlined style={{ color: upColor }} />,
  [UpDownType.Flat]: <MinusOutlined style={{ color: flatColor }} />,
  [UpDownType.Down]: <ArrowDownOutlined style={{ color: downColor }} />,
};

const MarketChart: FC<MarketChartProps> = ({ data }) => {
  return (
    <div className="flex mb-4">
      <div className="rounded-[10px] bg-white px-3 py-4 ">
        <div className="flex  flex-col">
          <div
            className={classNames('font-bold', 'w-[160px] flex-shrink-0')}
            style={{ color: getStyleColor(data?.newest, data?.prevClose) }}
          >
            <h4 className="text-[26px] ">
              {data?.newest} {UpDownTypeIcon[data?.upDownType]}
            </h4>
            <div className="text-base mt-2 leading-4">
              <span>{data?.change}</span>
              <span className="ml-[10px]">{`${data?.chg}%`}</span>
            </div>
          </div>
          <div className="flex flex-wrap  flex-col mt-4" style={{ color: labelColor }}>
            <Attribute
              label="今开"
              value={data?.open}
              style={{ color: getStyleColor(data?.newest, data?.prevClose) }}
            />
            <Attribute label="昨收" value={data?.prevClose} style={{ color: flatColor }} />
            <Attribute
              label="最高价"
              value={data?.high}
              style={{ color: getStyleColor(data?.newest, data?.prevClose) }}
            />
            <Attribute
              label="最低价"
              value={data?.low}
              style={{ color: getStyleColor(data?.newest, data?.prevClose) }}
            />
            <Attribute label="涨停价" value={data?.LU} style={{ color: upColor }} />
            <Attribute label="跌停价" value={data?.LD} style={{ color: downColor }} />
            <Attribute label="成交量" value={data?.volume} style={{ color: flatColor }} />
            <Attribute label="成交额" value={formatChineseAmount(data?.amount)} style={{ color: flatColor }} />
            <Attribute label="换手率" value={`${data?.turn}%`} style={{ color: flatColor }} />
          </div>
        </div>
      </div>
      <div className="rounded-[10px] bg-white px-3 py-4 text-sm leading-6 ml-4  w-[952px]">
        <div className="font-bold justify-center flex">时间：{data?.time}</div>
        <div>
          <span className="inline-block w-12 mr-1" style={{ color: labelColor }}>
            涨停
          </span>
          <span className={classNames('font-bold')} style={{ color: upColor }}>
            {data?.LU}
          </span>
        </div>
        <div className="border-b border-solid border-[#F2F5F7] my-1" />
        <div className="flex max-h-[120px]">
          <div className="flex-grow-0 min-w-[600px]">
            <SingleQuotation title="卖五" priceName="S5P" volumeName="S5V" data={data} totalPriceName="S5TP" />
            <SingleQuotation title="卖四" priceName="S4P" volumeName="S4V" data={data} totalPriceName="S4TP" />
            <SingleQuotation title="卖三" priceName="S3P" volumeName="S3V" data={data} totalPriceName="S3TP" />
            <SingleQuotation title="卖二" priceName="S2P" volumeName="S2V" data={data} totalPriceName="S2TP" />
            <SingleQuotation title="卖一" priceName="S1P" volumeName="S1V" data={data} totalPriceName="S1TP" />
          </div>
          <div className="flex flex-col flex-wrap">
            <Attribute label="外盘" value={+data?.outer} style={{ color: upColor }} />
            <Attribute label="外盘差" value={data?.diffOuter} style={{ color: upColor }} />
            <Attribute label="卖方压单指数" value={data?.sellPressure} style={{ color: flatColor }} />
            <Attribute label="卖单总量" value={data?.totalSellVolume} style={{ color: downColor }} />
            <Attribute
              label="卖单总额"
              value={formatChineseAmount(data?.totalSellAmount)}
              style={{ color: downColor }}
            />
          </div>
        </div>
        <div className="border-b border-solid border-[#F2F5F7] my-1" />
        <div className="flex  max-h-[120px]">
          <div className="flex-grow-0 min-w-[600px]">
            <SingleQuotation title="买一" priceName="B1P" volumeName="B1V" data={data} totalPriceName="B1TP" />
            <SingleQuotation title="买二" priceName="B2P" volumeName="B2V" data={data} totalPriceName="B2TP" />
            <SingleQuotation title="买三" priceName="B3P" volumeName="B3V" data={data} totalPriceName="B3TP" />
            <SingleQuotation title="买四" priceName="B4P" volumeName="B4V" data={data} totalPriceName="B4TP" />
            <SingleQuotation title="买五" priceName="B5P" volumeName="B5V" data={data} totalPriceName="B5TP" />
          </div>
          <div className="flex flex-col flex-wrap">
            <Attribute label="内盘" value={+data?.inner} style={{ color: downColor }} />
            <Attribute label="内盘差" value={data?.diffInner} style={{ color: downColor }} />
            <Attribute label="买方压单指数" value={data?.buyPressure} style={{ color: flatColor }} />
            <Attribute label="买单总量" value={data?.totalBuyVolume} style={{ color: upColor }} />
            <Attribute label="买单总额" value={formatChineseAmount(data?.totalBuyAmount)} style={{ color: upColor }} />
          </div>
        </div>
        <div className="border-b border-solid border-[#F2F5F7] my-1" />
        <div>
          <span className="inline-block w-12 mr-1" style={{ color: labelColor }}>
            跌停
          </span>
          <span className={classNames('font-bold')} style={{ color: downColor }}>
            {data?.LD}
          </span>
        </div>
      </div>
      <div className="rounded-[10px] bg-white px-3 py-4 w-[300px] max-h-[371px] overflow-auto ml-4">
        <ul>
          {data?.chineseContent?.map((content, index) => {
            return <li key={index}>{content}</li>;
          })}
        </ul>
      </div>
      {/* <div className="rounded-[10px] bg-white ml-4 w-[200px] px-3 py-4">
        <ul className="overflow-auto  max-h-[371px]">
          {data?.outOfTrack &&
            Object.keys(data?.outOfTrack)
              ?.reverse()
              .map((price) => {
                const { type,count} = data?.outOfTrack[price];

                return (
                  <li
                    className="flex justify-between"
                    key={price}
                    style={{
                      color: type === 'S' ? downColor : upColor,
                    }}
                  >
                    <span>{price}</span>
                    <span>{count}</span>
                    <span>{type}</span>
                  </li>
                );
              })}
        </ul>
      </div> */}
      {/* <div className="rounded-[10px] bg-white px-3 py-4 ml-4 min-w-[264px]">
        <h6 className="font-bold text-sm leading-6">分时成交</h6>
        <ul className="text-sm leading-6">
          {data?.details?.map(
            (
              { time, price, volume, num, type }, //type 1是主动卖出  2是主动性买入
              index,
            ) => (
              <li key={index}>
                <span className="inline-block w-[70px]" style={{ color: labelColor }}>
                  {time}
                </span>
                <span
                  className="font-bold inline-block w-[70px]"
                  style={{ color: getStyleColor(price, data?.prevClose) }}
                >
                  {price}
                </span>
                <span className="font-bold  inline-block w-[60px]" style={{ color: +type === 1 ? downColor : upColor }}>
                  {volume}
                </span>
                <span className="font-bold  inline-block w-[40px]">{num}</span>
              </li>
            ),
          )}
        </ul>
        <div className="border-b border-solid border-[#F2F5F7] my-1" />
        <div className="mt-3">
          <Attribute label="分时总量" value={data?.fsVolume} style={{ color: flatColor }} className="w-full mr-0" />
          <Attribute label="余量" value={data?.surplus} style={{ color: flatColor }} className="w-full mr-0" />
        </div>
      </div> */}
    </div>
  );
};

export default MarketChart;
